<template>
  <div>
    <el-row style="margin-bottom:20px;display:flex;justify-content:flex-start">
      <el-input placeholder="牌照" style="width:20%;margin-right:10px" v-model="carno" clearable></el-input>
      <!-- <selectcarnumber
        placeholder="牌照"
        @getpersonid2="getpersonid2"
        :itemtype="2"
        style="width:20%;margin-right:10px"
      ></selectcarnumber>-->
      <!-- <el-input placeholder="费用" style="width:20%;margin-right:10px" v-model="oilamount" clearable></el-input>
      <el-input placeholder="加油量" style="width:20%;margin-right:10px" v-model="oilsum" clearable></el-input>-->
      <!-- <el-date-picker
        v-model="olitime"
        type="date"
        style="margin-right:20px"
        placeholder="加油日期"
        value-format="yyyy-MM-dd"
      ></el-date-picker>-->
      <el-date-picker
        v-model="olitime"
        style="width:32%;margin-right:20px"
        type="daterange"
        rangeSeparator="至"
        startPlaceholder="加油开始日期"
        endPlaceholder="加油结束日期"
        valueFormat="yyyy-MM-dd"
        placeholder="加油时间"
        clearable
      ></el-date-picker>
      <el-button size="mini" type="primary" @click="getrefuellist">搜索</el-button>
    </el-row>

    <el-row>
      <el-button size="mini" @click="addmain">添加加油信息</el-button>
      <el-button size="mini" type="info" @click="clickdaoru">导入</el-button>
      <el-button size="mini" type="primary" @click="carrefueledit">编辑</el-button>
      <el-button size="mini" type="success" @click="deletefuel">删除</el-button>
    </el-row>
    <el-divider></el-divider>
    <fueltable
      :tableData="carfuellist"
      :itemvals.sync="itemvals"
      :pagobj.sync="pagobj"
      :itemval1.sync="itemval1"
    ></fueltable>
    <addfuel
      v-if="isfueltable"
      :addfuel.sync="changezt"
      :chousebtn="btnvalue"
      :chouseval="itemvals"
    ></addfuel>
    <el-dialog title="导入加油信息" :visible.sync="showin" width="40%">
      <el-form labelWidth="150px">
        <el-form-item label="选择文件" class="is-required">
          <input
            type="file"
            @change="importf(this)"
            accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="showin = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="daoru">导 入</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import addfuel from '~/components/carmanager/carrefuel/addfuel.vue';
import fueltable from '~/components/carmanager/carrefuel/refueltable.vue';
import selectcarnumber from '~/components/common/selectcarnumber.vue';
import FileSaver from 'file-saver';
import XLSX from 'xlsx';

export default {
  components: {
    fueltable,
    addfuel,
    selectcarnumber,
  },
  data() {
    return {
      dialogVisible: false,
      carfuellist: [], // 列表
      isfueltable: false,
      showin: false,
      olitime4: '',
      carno3: '',
      carno: '', //
      oilamount: '', // 费用
      oilsum: '', // 加油量
      itemval1: [],
      itemvals: [], // 获得表格选中信息
      olitime: ['', ''], // riqi,
      changezt: {}, // 添加/修改状态
      ts: this.newStore(),
      caroilid: [], // 选择获取的id
      btnvalue: 0,
      pagobj: {
        currentPage3: 1,
        pagesize: 10,
        total: 10,
      },
      addfuel: {
        carid: '',
        olitime: '',
        oilsum: 0,
        oilamount: '',
        currentmileage: 0,
      },
      carid: [],
      olitimedaoru: [],
      oilsum: [],
      oilamount: [],
      currentmileage: [],
    };
  },
  created() {
    this.getrefuellist();
  },
  watch: {
    changezt() {
      this.getrefuellist();
    },
  },
  methods: {
    // 获取cardno
    getpersonid2(val) {
      // this.carid = val.id;
      this.carno = val.id;
    },
    // 编辑
    carrefueledit() {
      this.btnvalue = 2;
      if (this.itemval1.length == 1) {
        this.reload('isfueltable');
      } else if (this.itemval1.length == 0) {
        this.$message('请先勾选一条加油信息');
      } else {
        this.$message('只能选择一条加油信息');
      }
    },
    // 删除
    deletefuel() {
      if (this.itemval1.length > 0) {
        this.$confirm(`是否删除${this.itemval1.length}车辆加油信息?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          for (let i = 0; i < this.itemval1.length; i++) {
            this.caroilid.push(this.itemval1[i].hash.caroilid);
          }
          const req = {
            handle: '0E56125B90D2898AB3161DCDA7D8E84293F9EBA63B86565B',
            caroilid: this.caroilid,
          };
          this.spost(this.ts, '/mainservlet', req).then((ts) => {
            if (ts.d.sflag == 'success') {
              this.$message({
                type: 'success',
                message: '删除成功!',
              });
              this.getrefuellist();
            }
          });
        });
      } else {
        this.$message('请先勾选一条删除信息');
      }
    },
    // 点击添加车辆
    addmain() {
      this.btnvalue = 1;
      this.reload('isfueltable');
    },
    // 公共组件刷新
    reload(partsname) {
      // console.log(partsname);

      this[partsname] = false;
      this.$nextTick(() => {
        this[partsname] = true;
      });
    },

    // 获得列表
    getrefuellist() {
      const req = {
        handle: '0E56125B90D2898AB3161DCDA7D8E84252E8C0E71D9A4773',
        carno: this.carno,
        oilamount: this.oilamount,
        oilsum: this.oilsum,
        olitimes: this.olitime[0],
        olitimee: this.olitime[1],
        start: (this.pagobj.currentPage3 - 1) * this.pagobj.pagesize,
        limit: this.pagobj.pagesize,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        if (ts.d.sflag == 'success') {
          this.carfuellist = ts.d.data.operation1;
          this.pagobj.total = parseInt(ts.d.data.operation2[0].hash.allrs);
          console.log(this.carfuellist, '2323');
        }
      });
    },
    // 导入功能
    clickdaoru() {
      this.showin = true;
    },
    importf(obj) {
      const _this = this;

      const inputDOM = this.$refs.inputer; // 通过DOM取文件数据
      this.file = event.currentTarget.files[0];
      const rABS = false; // 是否将文件读取为二进制字符串
      const f = this.file;

      const reader = new FileReader(); // if (!FileReader.prototype.readAsBinaryString) {

      FileReader.prototype.readAsBinaryString = function (f) {
        let binary = '';

        const rABS = false; // 是否将文件读取为二进制字符串

        const pt = this;

        let wb; // 读取完成的数据

        let outdata;

        const reader = new FileReader();

        reader.onload = function (e) {
          const bytes = new Uint8Array(reader.result);

          const length = bytes.byteLength;

          for (let i = 0; i < length; i++) {
            binary += String.fromCharCode(bytes[i]);
          }

          const XLSX = require('xlsx');

          if (rABS) {
            wb = XLSX.read(btoa(fixdata(binary)), {
              // 手动转化

              type: 'base64',
            });
          } else {
            wb = XLSX.read(binary, {
              type: 'binary',
            });
          } // outdata就是你想要的东西 excel导入的数据

          outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]); // excel 数据再处理
          console.log(outdata, 'outdata');
          outdata.forEach((v) => {
            _this.carid.push(v.__EMPTY_1);

            _this.olitimedaoru.push(v.__EMPTY_2);

            _this.oilsum.push(v.__EMPTY_3);

            _this.oilamount.push(v.__EMPTY_4);

            _this.currentmileage.push(v.__EMPTY_5);
          });

          console.log(
            _this.carid.slice(1),
            _this.olitimedaoru.slice(1),
            _this.oilsum.slice(1),
            _this.oilamount.slice(1),
            _this.currentmileage.slice(1),
            '_this.currentmileage',
          );

          _this.reload();
        };

        reader.readAsArrayBuffer(f);
      };

      if (rABS) {
        reader.readAsArrayBuffer(f);
      } else {
        reader.readAsBinaryString(f);
      }
    },
    daoru() {
      const req = {
        handle: '0E56125B90D2898A9F595BEEBE51B7F2A32DB82B39049979',
        carid: this.carid.slice(1),
        olitime: this.olitimedaoru.slice(1),
        oilsum: this.oilsum.slice(1),
        oilamount: this.oilamount.slice(1),
        currentmileage: this.currentmileage.slice(1),
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        if (ts.d.sflag == 'success') {
          this.$message({
            type: 'success',
            message: '添加成功!',
          });
          this.showin = false;
          this.getrefuellist();
        }
      });
    },
  },
};
</script>

